<template>
  <div :style='{height: "600px", width:"930px"}' id="myChart" ></div>
</template>

<script>
import *as echarts from 'echarts';
import chinaMap from "@/assets/json/china.json";
export default {
  name: "Map",

  methods:{
    drawLine(){
      echarts.registerMap("china", { geoJSON: chinaMap });
      let charts = echarts.init(document.querySelector(`#myChart`));
      charts.setOption({
        backgroundColor: "#ffffff",
        title: {
          text: "山东华辰泰尔区域性设备展示管理图",
          subtext: "",
          x: "center"
        },
        tooltip: {
          trigger: "item"
        },

        //左侧小导航图标
        visualMap: {
          min: 0,
          max: 600,
          text: ["高", "低"],
          inRange: {
            color: ["#D8FAFE", "#006EDD"]//此处是设置颜色过渡
          }
        },

        //配置属性
        series: [
          {
            name: "报名人数",
            type: "map",
            mapType: "china", // ---此处是中国地图样式-------需要注意：省份中应使用汉字即如 ‘mapType:"河南"’
            roam: true,
            label: {
              normal: {
                show: true //省份名称----你可以选择true，展示每个省份的名称
              },
              emphasis: {
                show: false
              }
            },
            data: [//这是数据，500以内的随机数
              { name: "北京", value: "100" },
              { name: "天津", value: Math.round(Math.random() * 500) },
              { name: "上海", value: Math.round(Math.random() * 500) },
              { name: "重庆", value: Math.round(Math.random() * 500) },
              { name: "河北", value: Math.round(Math.random() * 500) },
              { name: "河南", value: Math.round(Math.random() * 500) },
              { name: "云南", value: Math.round(Math.random() * 500) },
              { name: "辽宁", value: Math.round(Math.random() * 500) },
              { name: "黑龙江", value: Math.round(Math.random() * 500) },
              { name: "湖南", value: Math.round(Math.random() * 500) },
              { name: "安徽", value: Math.round(Math.random() * 500) },
              { name: "山东", value: Math.round(Math.random() * 500) },
              { name: "新疆", value: Math.round(Math.random() * 500) },
              { name: "江苏", value: Math.round(Math.random() * 500) },
              { name: "浙江", value: Math.round(Math.random() * 500) },
              { name: "江西", value: Math.round(Math.random() * 500) },
              { name: "湖北", value: Math.round(Math.random() * 500) },
              { name: "广西", value: Math.round(Math.random() * 500) },
              { name: "甘肃", value: Math.round(Math.random() * 500) },
              { name: "山西", value: Math.round(Math.random() * 500) },
              { name: "内蒙古", value: Math.round(Math.random() * 500) },
              { name: "陕西", value: Math.round(Math.random() * 500) },
              { name: "吉林", value: Math.round(Math.random() * 500) },
              { name: "福建", value: Math.round(Math.random() * 500) },
              { name: "贵州", value: Math.round(Math.random() * 500) },
              { name: "广东", value: Math.round(Math.random() * 500) },
              { name: "青海", value: Math.round(Math.random() * 500) },
              { name: "西藏", value: Math.round(Math.random() * 500) },
              { name: "四川", value: Math.round(Math.random() * 500) },
              { name: "宁夏", value: Math.round(Math.random() * 500) },
              { name: "海南", value: Math.round(Math.random() * 500) },
              { name: "台湾", value: Math.round(Math.random() * 500) },
              { name: "香港", value: Math.round(Math.random() * 500) },
              { name: "澳门", value: Math.round(Math.random() * 500) }
            ] //数据
          }
        ]
      }),
          window.addEventListener("resize", function() {
            charts.resize();
          })
    },
  },
  mounted() {
    this.drawLine();
  },
}
</script>

<style scoped>

</style>